import { constantRoutes, anyncRoutes } from "@/router"; //导入路由模块下面的静态路由表
const state = () => {
  return {
    // routes: "静态路由表",
    // 路由表数组:初始值是静态路由表的值（constantRoutes）
    routes: constantRoutes,
  };
};

const mutations = {
  //设置路由表 showAsyncRoutes自定义
  setRoutes: (state, showAsyncRoutes) => {
    // state.routes.push(...showAsyncRoutes);
    // 给routes数组追加筛选后的动态路由表;
    //或 ...展开进行赋值
    state.routes = [...constantRoutes, ...showAsyncRoutes];
  },
  //删除路由表
  removeRoutes: (state) => {
    state.routes = [];
  },
};
//可以放异步操作，包含多个mutations
const actions = {
  //筛选动态路由表
  filterAsyncRouteAction: ({ commit }, menus) => {
    //基于动态路由表和menus数组筛选（并且导入动态路由表）
    const showAsyncRoutes = anyncRoutes.filter((item) =>
      menus.includes(item.children[0].name)
    );
    //在的话，就留下(拥有的 权限/菜单,开放); 否则就过滤掉了，舍去了(就不开放)
    //includes确定数组中包不包含数组，包含返回true
    //筛选的条件:判断当前路由第一个children的名字是否在menus数组中
    //提交mutation ,传入筛选结果作为参数
    commit("setRoutes", showAsyncRoutes);

    //返回筛选结果（给路由守卫那边用）
    return showAsyncRoutes;
  },
};
//导出对象
export default {
  //开启命名空间，防止命名重复
  namespaced: true,
  state,
  mutations,
  actions,
};

// 总结：//解决左侧菜单不同步的问题，把这个左侧菜单变成响应式
//这个store/route.js只负责一件事：同步左侧菜单的显示
